<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    li button {
      border: 0;
      background: transparent;
      cursor: pointer;
      outline: 0 none;
    }

    li.completed {
      transition: opacity 2s;
      opacity: 0;
    }

    li button:before {
      content: '☑️';
    }

    li.completed button:before {
      content: '✅';
    }
  </style>
</head>
<body>
  <ul>
    <li><button></button><span>任务一：学习HTML</span></li>
    <li><button></button><span>任务二：学习CSS</span></li>
    <li><button></button><span>任务三：学习JavaScript</span></li>
  </ul>

  <script>

    const list = document.querySelector('ul');
    const buttons = list.querySelectorAll('button');

    let once = (fn) => {
      return (...args) => {
        if (fn) {
          let res = fn.call(this, ...args)
          fn = null
          return res
        }
      }
    }

    buttons.forEach((button) => {
      button.addEventListener('click', once((evt) => {
        const target = evt.target;
        target.parentNode.className = 'completed';

        setTimeout(() => {
          list.removeChild(target.parentNode);
        }, 2000);
      }));
    });


  </script>
</body>
</html>